<template>
  <div>
    <!-- 搜索功能 -->
    <div class="search-input1">
      <el-row :gutter="10">
        <el-col :span="3">
          <el-select 
            placeholder="班级选择" 
            v-model="searchClass"
            >
            <el-option
              v-for="item in majors"
              :key="item.classId"
              :label="item.label"
              :value="item.classId"
              @click.native="handleNodeClick(item)"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-input
            placeholder="查询学生学号或姓名"
            v-model="inputNameKey"
            clearable
            @keyup.enter.native="search"
            @blur="search"
          >
            <span
              slot="prefix"
              class="el-icon-search account-search-icon"
            ></span>
          </el-input>
        </el-col>
        <el-col :span="2" :offset="9">
          <el-button
            icon="el-icon-plus"
            class="head-button"
            @click.native="add"
            type="info"
            >添加</el-button
          >
        </el-col>
        <el-col :span="2">
          <el-upload
            action
            accept=".xlsx, .xls"
            :auto-upload="false"
            :show-file-list="false"
            :on-change="handle"
          >
            <el-button icon="el-icon-download" class="head-button">导入</el-button>
          </el-upload>
        </el-col>
        <el-col :span="2">
          <el-button
            icon="el-icon-upload2"
            class="head-button"
            v-debounce="loadExcel"
          >导出</el-button>
        </el-col>
        <el-col :span="2">
          <el-button 
            class="head-button" 
            v-debounce="downloadLeadExcel"
          >导入模板</el-button>
        </el-col>
      </el-row>
    </div>
    <div>
      <!-- 新增学生 -->
      <el-dialog
        :visible.sync="addVisible"
        title="新增学生"
        append-to-body
        class="dialog-style"
      >
        <el-form
          ref="ruleForm"
          :model="addStudent[0]"
          class="info-change"
          :label-width="formLabelWidth"
        >
          <el-form-item
            prop="username"
            label="学号:"
            :rules="[{ required: true, message: '学号不能为空', trigger: 'blur' },]"
          >
            <el-input
              v-model="addStudent[0].username"
              placeholder="请输入学号"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="名字:"
            prop="nickname"
            :rules="[
              { required: true, message: '名字不能为空', trigger: 'blur' },
            ]"
          >
            <el-input
              v-model="addStudent[0].nickname"
              placeholder="请输入名字"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="性别:"
            prop="gender"
            :rules="[
              { required: true, message: '性别不能为空', trigger: 'change' },
            ]"
          >
            <el-select v-model="addStudent[0].gender">
              <el-option
                v-for="item in sex"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="电话:"
            prop="phone"
            :rules="[
              { required: true, message: '电话不能为空', trigger: 'blur' },
              {
                type: 'string',
                pattern:/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
                message: '请正确填写您的手机号码！',
              },
            ]"
          >
            <el-input
              v-model="addStudent[0].phone"
              placeholder="请输入电话"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="addVisible = false" class="cancel-button">取消</el-button>
          <el-button @click="addSure" class="confirm-button">确定</el-button>
        </div>
      </el-dialog>
      <!-- 确认导入信息 -->
      <el-dialog
        :visible.sync="leadVisible"
        title="在该班级导入以下学生信息"
        class="dialog-style"
      >
        <el-table :data="addStudents">
          <el-table-column label="学号">
            <template slot-scope="scope">
              <span>{{ scope.row.username }}</span>
            </template>
          </el-table-column>
          <el-table-column label="昵称">
            <template slot-scope="scope">
              <span>{{ scope.row.nickname }}</span>
            </template>
          </el-table-column>
          <el-table-column label="性别">
            <template slot-scope="scope">
              <span>{{ scope.row.gender=="FEMALE"?'男':'女' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="电话">
            <template slot-scope="scope">
              <span>{{ scope.row.phone }}</span>
            </template>
          </el-table-column>
          <el-table-column label="能否能正常导入">
            <template slot-scope="scope">
              <span v-if="scope.row.status">
                <i class="el-icon-check leadTrue"></i>
              </span>
              <span v-else class="btn_danger">学号重复无法导入</span>
            </template>
          </el-table-column>
        </el-table>
        <div slot="footer">
          <el-button @click="leadCancel" class="cancel-button">取消</el-button>
          <el-button @click="leadSure" class="confirm-button">确定</el-button>
        </div>
      </el-dialog>

      <!-- 表格输出 -->
      <el-main>
        <el-table :data="studentForm" stripe v-loading="tableLoading">
          <el-table-column label="用户ID">
            <template slot-scope="scope">
              <span>{{ scope.row.userId }}</span>
            </template>
          </el-table-column>
          <el-table-column label="学号">
            <template slot-scope="scope">
              <span>{{
                scope.row.userName ? scope.row.userName : scope.row.username
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名">
            <template slot-scope="scope">
              <span>{{
                scope.row.nickName ? scope.row.nickName : scope.row.nickname
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="性别">
            <template slot-scope="scope">
              <span>{{ scope.row.gender }}</span>
            </template>
          </el-table-column>
          <el-table-column label="电话">
            <template slot-scope="scope">
              <span>{{ scope.row.phone }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="small"
                @click="modify(scope.$index)"
                icon="el-icon-edit-outline"
                class="btn_primary"
                >编辑</el-button
              >
              <el-dialog
                title="编辑"
                :visible.sync="modifyVisible"
                append-to-body
                class="dialog-style"
              >
                <el-form
                  class="info-change"
                  :label-width="formLabelWidth"
                  ref="ruleForm"
                  :model="updateStudentForm"
                >
                  <el-form-item
                    label="学号:"
                    prop="username"
                    :rules="[
                      {
                        required: true,
                        message: '学号不能为空',
                        trigger: 'blur',
                      },
                    ]"
                  >
                    <el-input
                      v-model="updateStudentForm.username"
                      placeholder="请输入学号"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="姓名:"
                    prop="nickname"
                    :rules="[
                      {
                        required: true,
                        message: '名字不能为空',
                        trigger: 'blur',
                      },
                    ]"
                  >
                    <el-input
                      v-model="updateStudentForm.nickname"
                      placeholder="请输入姓名"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="班级:"
                    prop="classId"
                    :rules="[
                      {
                        required: true,
                        message: '班级不能为空',
                        trigger: 'change',
                      },
                    ]"
                  >
                    <el-select v-model="updateStudentForm.classId">
                      <el-option
                        v-for="item in classes"
                        :key="item.classId"
                        :label="item.label"
                        :value="item.classId"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="性别:"
                    prop="gender"
                    :rules="[
                      {
                        required: true,
                        message: '性别不能为空',
                        trigger: 'change',
                      },
                    ]"
                  >
                    <el-select v-model="updateStudentForm.gender">
                      <el-option
                        v-for="item in anotherSex"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="电话:"
                    prop="phone"
                    :rules="[
                      {
                        required: true,
                        message: '电话不能为空',
                        trigger: 'blur',
                      },
                      {
                        type: 'string',
                        pattern:
                          /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
                        message: '请正确填写您的手机号码！',
                      },
                    ]"
                  >
                    <el-input
                      v-model="updateStudentForm.phone"
                      placeholder="请输入电话"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="修改密码:" prop="isChangePassword">
                    <el-switch v-model="isChangePassword"></el-switch>
                  </el-form-item>
                </el-form>

                <div slot="footer">
                  <el-button
                    @click="modifyVisible = false"
                    class="cancel-button"
                    >取消</el-button
                  >
                  <el-button @click="modifySure" class="confirm-button"
                    >确定</el-button
                  >
                </div>
              </el-dialog>
              <el-button
                slot="reference"
                type="danger"
                size="small"
                icon="el-icon-delete"
                @click="removeConfirm(scope.$index)"
                class="btn_danger"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="1"
            :page-sizes="[5, 10, 15, 20]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.eachClassStudents"
            class="change-page"
          ></el-pagination>
        </div>
      </el-main>
    </div>
  </div>
</template>
<script>
import xlsx from "xlsx";
import { readFile, character } from "../../../assets/lib/utils";
import {
  searchClassStu,
  getStuByClassId,
  delStudent,
  addStu,
  updateStu,
  userIsRepeat
} from "@/api/studentManage";
import { dataConversionUtil } from "../../../assets/lib/utils";
import { pageClassBySchool } from "@/api/class";
export default {
  data() {
    return {
      formLabelWidth: "100px",
      schoolName: null, //学校名称
      schoolId: null,
      userId: null, //教师Id
      //1. 搜索时所用到的数据
      // 传给后端的数组
      searchClass: null, //查看的班级
      majors: [], //老师的班级列表
      current: 1, // 当前的页码 第几页
      limit: 10, // 每页多少条数据
      things: null, // things是渲染到头部的班级名称
      thingsId: null, //班级id
      teacherId:null,//教师id
      studentForm: [], // 每班的学生信息列表
      classes: [],
      anotherSex: [
        {
          value: "MALE",
          label: "男",
        },
        {
          value: "FEMALE",
          label: "女",
        },
      ],
      updateStudentForm: {}, // 修改班级学生需要传给后端的数据
      // 弹层
      modifyVisible: false,
      // 分页
      eachClassStudents: null, //总的学生个数
      otherCurrent: 1, //当前页数
      otherLimit: 10, //一页多少条
      numOfStudents: null, //搜索总的学生
      // 添加单个学生时，所要传给后端的数组
      addVisible: false,
      addStudent: [
        {
          username: null,
          password: null,
          nickname: null,
          gender: null,
          phone: null,
          role: "STUDENT",
          status: true,
          classId: null,
          schoolId: null,
        },
      ],
      sex: [
        {
          value: "MALE",
          label: "男",
        },
        {
          value: "FEMALE",
          label: "女",
        },
      ],
      // 导入
      addOtherStudents: [], // 中间数组
      // 传给后端的数组
      addStudents: [],
      // 弹窗
      leadVisible: false,
      tableLoading: false, //加载每个班级时候所用到的
      isChangePassword: false, // 判断是否修改密码
      inputNameKey: null,
      isSearch: false,
    };
  },
  methods: {
    // 1.搜索学生
    search() {
      if(!this.inputNameKey) {
        this.isSearch = false;
        this.again();
        return;
      } 
      this.isSearch = true;
      this.tableLoading = true;
      let isNum = /^\d+$/.test(this.inputNameKey)
      if(isNum){
        var usernameKey=this.inputNameKey;
        var nicknameKey='';
      } else{
        var nicknameKey=this.inputNameKey;
        var usernameKey='';
      }
      searchClassStu({
        classId:this.thingsId,
        pageNum: this.otherCurrent,
        pageSize: this.otherLimit,
        usernameKey: usernameKey,
        nicknameKey: nicknameKey
      })
        .then((res) => {
          this.studentForm = res.data;
          this.eachClassStudents = res.total;
          for (var i = 0; i < this.studentForm.length; i++) {
            if (this.studentForm[i].gender == 1) {
              this.studentForm[i].gender = "男";
            } else {
              this.studentForm[i].gender = "女";
            }
          }
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },
    // 2.专业选择模块
    async handleNodeClick(data) {
      this.isSearch = false;
      this.otherCurrent = 1;
      this.tableLoading = true;
      this.things = data.label;
      this.thingsId = data.classId;
      this.teacherId = data.teacherId;
      await this.again();
    },
    // 根据学校查班级
    async getClassMethod() {
      pageClassBySchool({ current: 1, limit: 1000, id: this.schoolId }).then(
        (res) => {
          console.log(res.data);
          for (var i = 0; i < res.data.length; i++) {
            this.majors.push({
              classId: res.data[i].id,
              label: res.data[i].className,
              teacherId:res.data[i].teacherId
            });
          }
          this.searchClass = this.majors[0].classId;
          this.handleNodeClick(this.majors[0]);
        }
      );
    },
    // 修改学生
    modify(index) {
      // 把一开始获取到的班级渲染给修改学生这里用
      this.classes = this.majors;
      if (this.studentForm[index].gender == "男") {
        this.updateStudentForm.gender = "MALE";
      } else {
        this.updateStudentForm.gender = "FEMALE";
      }
      this.updateStudentForm.classId=this.thingsId?this.thingsId:this.studentForm[index].classList[0].id;
      (this.updateStudentForm.username = this.studentForm[index].userName
        ? this.studentForm[index].userName
        : this.studentForm[index].username),
      (this.updateStudentForm.nickname = this.studentForm[index].nickName
        ? this.studentForm[index].nickName
        : this.studentForm[index].nickname),
      (this.updateStudentForm.phone = this.studentForm[index].phone),
      (this.updateStudentForm.password = this.studentForm[index].password),
      (this.updateStudentForm.userId = this.studentForm[index].userId),
      (this.isChangePassword = false);
      this.updateStudentForm = JSON.parse(JSON.stringify(this.updateStudentForm));
      this.modifyVisible = true;
    },
    async modifySure() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          (this.updateStudentForm.password=this.isChangePassword?this.generate():this.updateStudentForm.password),
          (this.updateStudentForm.role = "STUDENT"),
          (this.updateStudentForm.schoolId = this.schoolId),
          (this.updateStudentForm.status = true),
          (this.modifyVisible = true);
          var newPwd = this.updateStudentForm.password;
          var newName = this.updateStudentForm.username;
          this.tableLoading = true;

          // console.log(this.updateStudentForm.password,newPwd, newName);
          updateStu(this.updateStudentForm).then((res) => {
            this.$message.success("修改成功");
            this.again();
            if (this.isChangePassword) {
              this.open(newPwd); // 提示框展示密码
              this.creatPasswordFile(newPwd,"password_STUDENT_" + newName + ".txt"); //导出个人密码
            }
          });
          this.modifyVisible = false;
        }
      });
    },
    //确认是否删除学生
    removeConfirm(index) {
      this.$confirm("删除后不可恢复", "是否删除该学生？", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        center: true,
      })
        .then(() => {
          this.handleDelete(index);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 删除学生
    async handleDelete(index) {
      this.tableLoading = true;
      await delStudent({ userId: this.studentForm[index].userId }).then(
        (res) => {
          this.$message.success("删除成功");
        }
      );
      await this.again();
    },
    //确认是否删除搜索学生
    removeSearchConfirm(index) {
      this.$confirm("删除后不可恢复", "是否删除该学生？", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        center: true,
      })
        .then(() => {
          this.DeleteBySearch(index);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 学生分页
    async handleSizeChange(val) {
      this.tableLoading = true;
      this.otherLimit = val;
      await this.again();
    },
    async handleCurrentChange(val) {
      this.tableLoading = true;
      this.otherCurrent = val;
      await this.again();
    },
    // 添加单个学生
    add() {
      if (this.things != null) {
        this.addStudent = [
          {
            username: null,
            password: null,
            nickname: null,
            gender: null,
            phone: null,
            userId: null,
            role: "STUDENT",
            status: true,
            classId: null,
            schoolId: null,
          },
        ];
        this.addVisible = true;
      } else {
        this.$message.error("请先点击班级");
      }
    },
    //生成密码
    generate() {
      var pwdArray = [
        //密码元素
        ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z",],
        ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z",],
        ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
        // ,['!','@','#','$','%','^','&','*']
      ];
      var pwd = [];
      var len = 6; //规定密码位数为6位
      for (let i = 0; i < len; i++) {
        let sortArray = pwdArray[i % 3]; //规定密码必须包含字母、数字、特殊字符
        let pwdIndex = Math.floor(Math.random() * sortArray.length); //pwdIndex为sortArray元素内的随机索引
        pwd.push(sortArray[pwdIndex]);
      }
      while (len > 0) {
        len--;
        let index = Math.floor(Math.random() * len);
        let temp = pwd[index];
        pwd[index] = pwd[len];
        pwd[len] = temp;
      }
      return pwd.join("");
    },
    //密码提示
    open(data) {
      this.$alert(data, "该账号密码为", {
        confirmButtonText: "确定",
        showClose: false,
        callback: (action) => {
          this.$message({
            type: "info",
            message: `action: ${action}`,
          });
        },
      });
    },
    //导出密码
    creatPasswordFile(data, filename) {
      var uri =
        "data:application/vnd.ms-TXT;charset=utf-8," + encodeURIComponent(data);
      var link = document.createElement("a");
      link.href = uri;
      link.download = `${filename}`;
      link.click();
    },
    addSure() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.addVisible = false;
          this.tableLoading = true;
          this.addStudent[0].classId = this.thingsId;
          this.addStudent[0].schoolId = this.schoolId;
          this.addStudent[0].password = this.generate();
          var newPwd = this.addStudent[0].password;
          var newName = this.addStudent[0].username;
          // console.log(this.addStudent[0].password,newPwd, newName);
          userIsRepeat(this.addStudent)
              .then((res)=>{
                if(res.data[0].status==false){
                  this.$message.error("学生学号信息重复！无法导入");
                  return;
                }else{
                  addStu(this.addStudent)
                    .then((res) => {
                      this.$message.success("添加成功");
                      this.again();
                      this.open(newPwd);// 提示框展示密码
                      this.creatPasswordFile(newPwd, "password_STUDENT_"+newName+".txt");//导出个人密码
                    })
                    .catch((err) => {
                      this.$message.error("请先选择班级或者正确填写信息");
                    });
                }
              })
            this.again();
          }
        })
    },
    // 批量添加学生
    async handle(ev) {
      if (this.things != null) {
        let file = ev.raw;
        if (!file) return;
        let data = await readFile(file);
        let workbook = xlsx.read(data, { type: "binary" });
        // console.log(workbook);
        let worksheet = workbook.Sheets[workbook.SheetNames[0]];
        data = xlsx.utils.sheet_to_json(worksheet);
        let arr = [];
        data.forEach((item) => {
          let obj = {};
          for (let key in character) {
            if (!character.hasOwnProperty(key)) break;
            let v = character[key],
              text = v.text,
              type = v.type;
            v = item[text] || "";
            type === "string" ? (v = String(v)) : null;
            type === "number" ? (v = Number(v)) : null;
            obj[key] = v;
          }
          arr.push(obj);
        });
        this.addOtherStudents = arr;
        for (var i = 0; i < this.addOtherStudents.length; i++) {
          if (this.addOtherStudents[i].gender == "男") {
            this.addOtherStudents[i].gender = "MALE";
          } else {
            this.addOtherStudents[i].gender = "FEMALE";
          }
          this.addStudents.push({
            classId: this.thingsId,
            gender: this.addOtherStudents[i].gender,
            nickname: this.addOtherStudents[i].nickname,
            password: this.generate(),
            phone: this.addOtherStudents[i].phone,
            role: "STUDENT",
            schoolId: this.schoolId,
            status: true,
            username: this.addOtherStudents[i].username,
          });
        }
        await userIsRepeat(this.addStudents)
          .then((res)=>{this.addStudents=res.data;})
        this.leadVisible = true;
      } else {
        this.$message.error("请先点击班级");
      }
    },
    // 取消导入
    leadCancel() {
      this.addStudents = [];
      this.leadVisible = false;
    },
    // 确定导入
    async leadSure() {
      this.leadVisible = false;
      this.tableLoading = true;
      await addStu(this.addStudents)
        .then((res) => {
          this.$message.success("导入成功");
          this.loadExcel();
        })
        .catch((err) => {
          this.$message.error("请先点击班级或excel表中的学号正确");
        });
      await this.again();
      this.addStudents = [];
    },
    // 导入模板下载
    downloadLeadExcel() {
      var dataList = [];
      dataList.push(["阿东", "202200000001", "女", "123456789"]);
      dataList.push(["阿南", "202200000002", "男", "223456789"]);
      dataList.push(["阿西", "202200000003", "女", "323456789"]);
      dataList.push(["阿北", "202200000004", "男", "423456789"]);
      var tableHeader = [["昵称", "学号", "性别", "电话"]];
      dataConversionUtil.dataToExcel("学生导入模板", tableHeader, dataList);
      this.$message.success("模板下载成功!");
    },
    // 导出学生数组伪excel
    loadExcel() {
      getStuByClassId({
        classId: this.thingsId,
        teacherId: this.teacherId,
        current: this.otherCurrent,
        limit: 1000,
      }).then((res) => {
        // 处理传过来的班级信息  res.data
        // console.log(res.data);
        for (var i = 0; i < res.data.length; i++) {
          if (res.data[i].gender == 1) {
            res.data[i].gender = "男";
          } else {
            res.data[i].gender = "女";
          }
        }
        var dataList = [];
        res.data.forEach((item) => {
          dataList.push([
            item.nickName,
            item.userName,
            item.password,
            item.gender,
            item.phone,
          ]);
        });
        var tableHeader = [["昵称", "学号", "密码", "性别", "电话"]];
        dataConversionUtil.dataToExcel(
          this.things + "(附带密码)",
          tableHeader,
          dataList
        );
        this.$message.success("导出成功!");
      });
    },
    // 重新申请班级列表
    async again() {
      if (this.isSearch) {
        this.search();
        return;
      }
      this.tableLoading = true;
      await getStuByClassId({
        classId: this.thingsId,
        teacherId: this.teacherId,
        current: this.otherCurrent,
        limit: this.otherLimit,
      })
        .then((res) => {
          this.studentForm = res.data;
          this.eachClassStudents = res.total;
          for (var i = 0; i < this.studentForm.length; i++) {
            if (this.studentForm[i].gender == 1) {
              this.studentForm[i].gender = "男";
            } else {
              this.studentForm[i].gender = "女";
            }
          }
        })
        .catch((err) => {
          this.$message.error("错误");
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },
  },
  created() {
    this.userId = JSON.parse(localStorage.getItem("user")).userId; //拿到教师userId
    this.schoolName = JSON.parse(localStorage.getItem("user")).schoolName; //学校名称
    this.schoolId = JSON.parse(localStorage.getItem("user")).schoolId; //学校Id
    this.getClassMethod();
  },
};
</script>
<style scoped>
.title {
  font-size: 32px;
  color: #409eff;
  margin-bottom: 30px;
  font-weight: bold;
}
.search-input1 {
  padding: 0 2%;
}
.search-input1 /deep/ .el-input__inner {
  border-radius: 25px;
  height: 25px;
  width: 100%;
}

.search-input1 /deep/ .el-input__icon {
  height: 200% !important;
  margin-top: -11px !important;
}
.account-search-icon {
  font-size: 15px;
  margin: 6px 4px;
  color: #5b8bff;
}
.head-button {
  background: #5b8bff;
  color: #f4f4f5;
  border-radius: 340px;
  height: 25px;
  padding-top: 4px;
}
.el-table /deep/ .el-table__cell,
.el-table /deep/ td.el-table__cell,
.el-table /deep/ th.el-table__cell.is-leaf {
  border-bottom: none;
  text-align: center;
}
.el-table /deep/ th.el-table__cell.is-leaf {
  color: #7986a6;
  font-weight: 500;
}
.el-table /deep/ td.el-table__cell {
  padding: 3px 0;
}
.cancel-button {
  border-radius: 20px;
  height: 35px;
  background-color: #909399;
  color: #f4f4f5;
}
.confirm-button {
  border-radius: 20px;
  height: 35px;
  background-color: #5b8bff;
  color: #f4f4f5;
}
.dialog-style /deep/ .el-dialog__header {
  background-color: #5b8bff;
  text-align: left;
  height: 20px;
}
.dialog-style /deep/ .el-dialog__title {
  color: #f4f4f5;
  font-size: 18px;
}
.dialog-style /deep/ .el-dialog__close {
  color: #f4f4f5;
}
.dialog-style /deep/ .el-dialog__footer {
  text-align: center;
}
.dialog-style /deep/ .el-form-item__label {
  text-align: center;
}
.info-change {
  padding: 2% 6% 1% 6%;
  border-bottom: 2px solid #c0c4cc8f;
}
div /deep/ .el-dialog__body {
  margin-bottom: -3%;
}
.change-page {
  margin-top: 15px;
}
.leadTrue{
  color:green;
  font-size: 20px;
  font-weight: 800;
}
</style>